<!-- Content Background -->
    <div id="content_bg" class="png_bg">
    <!-- Content-->
    <div id="content">		
        <!--Tag Menu -->
        <div style="margin: 1.5em; text-align: center;">
        	<span class="info_tabs nounderline" style="font-size:16px; font-weight: bold; margin-left:2em;">
        		<img src='images/writer_tools_promote_address_book.png' width='18' height='18' alt='writer_tools_promote_address_book.png' style='margin: 0 0.2em'  />
                <span class="info_tabs_selected nohover" style="vertical-align: middle">Invite</span>
        	</span>
        </div>
        <!--Tag Menu-->
        
       <!--Invite Container--> 
	   <div style="border:1px solid #333; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin: 1em auto; padding: 20px; position: relative; width: 45%">
		    <h1 style="font-size: 18px; text-align: center;">Invite Your Friends</h1>
            <p style="margin: 15px auto; width: 90%;">
                Invite your friends to join the largest community of readers and writers on the web.
            </p>
            <!--Form Invite Container-->
            <form id="invite_friends_form" action="#" method="post" enctype="multipart/form-data" style="margin: 0 auto; width: 90%;">
			     <div class="search_panel">
				        <input class="text_field" autofocus maxlength="128" name="email" placeholder="Enter an email address here" tabindex="10" type="text"/>
				        <input class="submit" type="submit" tabindex="20" value="" />
				 </div>
				<br style="clear: both;"/>
				<!--<a id="import_emails" href="#" style="display:block; padding: 2px; text-align: right;">import contacts</a>-->

				<div class="emails_container" style="display: none;"></div>
				<textarea class="email_content" type="text" name="content" maxlength="2000" tabindex="30">Check out Wattpad to discover and share stories. See what stories I've been reading and writing.</textarea>

				<div class="ajax_error" style="min-height: 20px; padding: 10px; text-align:center;"></div>
				<div style="text-align: center">
                    <input class="b2 orange" name="invite_friends_submit" tabindex="40" type="submit" value="Invite" />
                </div>
			</form>
            <!--Form Invite Container-->

			<div id="spinner" style="display: none; position: absolute; top: 50%;left: 50%; margin-left: -16px">
			     <img src='images/spinner.gif' width='32' height='32' alt='spinner.gif'  />		
            </div>

		<div id="message" style="display: none; position: absolute; top: 60%; left: 50%; margin: 10px 0 0 -150px; width: 300px;">
			<div class="ajax_success"></div>
		</div>
	  </div>
      <!--Invite Container-->

	<script type="text/javascript" src="../js/address_books.js"></script>
	<script type="text/javascript" charset="utf-8">
		csInit({
			domain_key: '4KBL32K6JLRJDBTZ2BRQ',
			mobile_render: true,
			afterSubmitContacts: function (contacts) {
			 for (i = 0; i<contacts.length; i++) {
				 ga_track('Invite Friends - Email', 'Import', 'Number of Contacts Imported', contacts.length);
				 addEmail(contacts[i]['email'][0]['address'], true);
			 }
			 return true;
			}
		});
	</script>
	<script type="text/javascript">
		var HOME_PATH = 'home.html';
		var REDIRECT_TIMEOUT = 5000;
		var emails = [];

		function addEmail(email, display) {
			var regex = /[!#$%&\'*+-\/=?^_`{|}~a-z0-9-]+(\.[!#$%&\'*+-\/=?^_`{|}~a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/i;

			if (email.match(regex)) {
				if (emails.indexOf(email)===-1) {
					ga_track('Invite Friends - Email', 'Add Email', 'Valid', 1);

					emails.push(email);

					if (display) {
						var html = $('<div>')
							.addClass('item')
							.html('<span class="content">'+email+'</span>'+'<span class="cancel">X</span>')
							.appendTo('.emails_container');

						$('.emails_container')[0].scrollTop = $('.emails_container')[0].scrollHeight;
					}
				}

				if (!$('.emails_container').is(':visible')) {
					$('.emails_container').show();
				}

				return true;
			}
			else {
				ga_track('Invite Friends - Email', 'Add Email', 'Invalid', 0);

				alert('Whoops! Please try entering that email again.');

				return false;
			}
		}

		function removeEmail(email) {
			var index = emails.indexOf(email);
			if (index!==-1) {
				emails.splice(index, 1);
			}
		}

		function doneHandler() {
			window.location.href = HOME_PATH;
		}

		$(document).ready(function () {
			$('.search_panel .text_field').bind('change keyup', function () {
				var filename = $('.search_panel .submit').css('background-image');
				if ($(this).val().length) {
					if (filename.indexOf('over')===-1) {
						filename = filename.replace(new RegExp("(.+).(png)", "g"), "$1_over.$2")
						$('.search_panel .submit').css('background-image', filename);
					}
				}
				else {
					if (filename.indexOf('over')!==-1) {
						filename = filename.replace(new RegExp("(.+)_over.(png)", "g"), "$1.$2")
						$('.search_panel .submit').css('background-image', filename);
					}
				}
			});

			$('.search_panel .submit').click(function () {
				var email = $('.search_panel .text_field').val();

				if (addEmail(email, true)) {
					$('.search_panel .text_field').val('');
				}

				return false;
			});

			$('.item .cancel').live('click', function () {
				ga_track('Invite Friends - Email', 'Remove Email');

				removeEmail($(this).siblings('.content').html());
				$(this).parent().remove();

				return false;
			});

			$('#import_emails').click(function () {
				ga_track('Invite Friends - Email', 'Import', 'Click');

				cloudsponge.launch();

				return false;
			});

			$('[name="invite_friends_submit"]').click(function () {
				var email = $('.search_panel .text_field').val();

				if ((email.length && addEmail(email, false)) || (!email.length && emails.length)) {
					$('#invite_friends_form').parent().css('min-height', $('#invite_friends_form').parent().height());
					$('#invite_friends_form').slideUp('slow', function () {
						$('#spinner').slideDown('slow');
						$('#message').slideDown('slow');
						$('.ajax_success').html('Sending');

						$.ajax({
										 type: 'POST',
										 url: API2_PATH+'userinvites',
										 data: {
											 'id':2944199,
											 'emails': emails.join(','),
											 'content': $('.email_content').val()
										 },
										 dataType: 'json',
										 success: function (data) {
											 ga_track('Invite Friends - Email', 'Form Submit', 'Number of Contacts', emails.length);

											 var message = data['message']+' '+'You will be redirected within a few seconds'+'...';

											 $('#spinner').fadeOut('slow', function () {
												 $('#message').fadeOut('slow', function () {
													 $('.ajax_success').html(message);
													 $('#message').fadeIn('slow');
												 });
											 });

											 window.setInterval(doneHandler, REDIRECT_TIMEOUT);
										 },
										 error: function (data) {
											 var message = JSON.parse(data.responseText)['message'];

											 $('#message').slideUp('slow', function () {
												 $('#spinner').slideUp('slow', function () {
													 $('.ajax_error').html(message);
													 $('#invite_friends_form').slideDown('slow');
												 });
											 });
										 }
									 });
					});
				}
				else if (!email.length && !emails.length) {
					alert('Enter an email address and try again');
				}

				return false;
			});
		});
	</script>
		<!--Sponsor Bottom-->
	<div id="ad_bottom_banner" style="clear:both;text-align:center;padding-bottom:10px">
        <div class="ad">sponsor</div>
        <iframe src="http://optimized-by.rubiconproject.com/a/7941/12756/23272-2.html?" FRAMEBORDER="0" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="NO" WIDTH="728" HEIGHT="90"></iframe>
	</div>	
    <!--Sponsor Bottom-->
    
 </div>
 <!-- End Content -->
 
 <!-- Content Bottom -->
 <div id="content_bottom" class="png_bg"></div>
  <!-- Content Bottom -->